<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
    	*{
    		padding:0;
    		margin:0;
    	}
        #body {background-image:url(img/c.jpg);}
        #div1{z-index:-1;height:50px;width:50px;position:absolute;background:red;top:0px;left:0px;border-radius:25px;}
        .a1{
        	width:100%;
        	height:80px;
        	background-color:rgb(129,83,0);
        	/*z-index:99;*/
        }
        .a1>div{
        	float:left;
        	background-color: rgb(117,73,0);
        	width:100px;
        	height:40px;
        	margin-top:20px;
        	color:rgb(146,116,30);
        	line-height:40px;
        	text-align:center;
        	margin-left:50px;
        	z-index:999;
        }
        .a3{
        	display:none;
        	z-index:9999;
        }
        .a2:hover .a3{
        	z-index:9999;
        	background-color: aquamarine;
        	display:block;
        }
        /*div:not(#div1){
        	opacity:0.9;
        }*/
       div{
       	opacity: 0.9;
       }



        .a18{
        	color:rgb(208,188,65);
        	position:absolute;
        	top:55px;
        	right:50px;
        	height:50px;
        	width:100px;
        	font-size:25px;
        	text-align:center;
        	line-height:50px;
        }
        
        .a4{
        	margin-top:20px;
          width:25%;
          height:400px;
          float:left;
        }





ul {
	list-style: none
}

#wrap {
	width: 980px;
	height: 500px;
}

#wrap li {
	position: absolute;
	left: 0;
	top: 0;
	transition: transform 1500ms ease-out;
	background-color: white;
}

.box {
	width: 100%;
	height: 100%;
	background-size: cover;
	transition: transform 1500ms ease-out;
}

.center {
	margin: auto;
	position: absolute;
	left: 0;
	right: 0;
	top: 200px;
	bottom: 0;

}
    </style>
    <script src="js/jquery-3.3.1.min.js"></script>
    <script type="text/javascript">
$(function () {
	var collums = 5;//列
	var rows = 5;//行
	var wrap = $('#wrap');
	var w = wrap.width() / rows;
	var h = wrap.height() / collums;


	for (var r = 0; r < rows; r++) {
		for (var c = 0; c < collums; c++) {

			$('<li><div class="box"></div></li>').width(w).height(h)
					.css({
						'left': w * c + 'px',
						'top': h * r + 'px',
						'transform': 'scale(0.9) rotate(' + (Math.random() * 40 - 20) + 'deg) ' +
						'translateX(' + (30*c-60) + 'px)' +
						'translateY(' + (30*r-60) + 'px)'
					})
					.find('.box')
					.css({
						'background-image': 'url(img/' + (r * collums + c) + '.jpg)',
						'transform': 'scale(0.9)'
					})
					.end()
					.appendTo(wrap)
		}
	}

	var change = true;
	wrap.find('li').on('click', function () {
		if (change == true) {
			var bgImg = $(this).find("div[class='box']").css('background-image');
			var bgLeft = 0;
			var bgTop = 0;
			$('#wrap li').each(function (index) {
				var $this=$(this);
				$(this).delay(40*index).animate({"opacity":0},200, function () {
					$this.css({
						'transform': ' rotate(0deg) ' +
						'translateX(0)' +
						'translateY(0)'
					});
					$this.find("div[class='box']").css({
						'background-image': bgImg,
						'background-size': 'auto',
						'backgroundPositionX': -bgLeft,
						'backgroundPositionY': -bgTop,
						'transform': 'scale(1)'
					});
					bgLeft += 196;
					if (bgLeft >= 980) {
						bgTop += 100;
						bgLeft = 0;
					}
					$this.animate({"opacity":1},300);
				})




			});
			change = false;

		} else if (change == false) {

			$('#wrap li').each(function (index) {
				var c=index %collums;
				var r=parseInt(index/collums);
				var $this=$(this);
				$(this).delay(40*index).animate({"opacity":0},200, function () {
					$this.css({
						'transform': 'rotate(' + (Math.random() * 40 - 20) + 'deg)' +
						'translateX(' + (30*c-60) + 'px)' +
						'translateY(' + (30*r-60) + 'px)'
					});
					$this.find('div').css({
						'background-image': 'url(img/' + index + '.jpg)',
						'background-size': 'cover',
						'transform': 'scale(0.9)'
					});
					$this.animate({"opacity":1},200);
				})

			});
			change = true;
		}
	})
})
</script>
    <script>
        <!--当鼠标指针在元素内部移动时重复的触发 mosemove;-->
//      document.onmousemove=function(even)
//      {
//          var oDiv=document.getElementById('div1');
////            document.body  Chrome专用
//          var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
//          var scrollLeft=document.documentElement.scrollLeft||document.body.scrollLeft;
//
//              var oEvent=even||event;
//              oDiv.style.top = (scrollTop+oEvent.clientY-25)+"px";
//              oDiv.style.left=(scrollLeft+oEvent.clientX-25)+"px";
//      }
$(document).mousemove(function(e){
	var oDiv=$('#div1');
	var scrollTop=$(document).scrollTop()||$('body').scrollTop();
	var scrollLeft=$(document).scrollLeft()||$('body').scrollLeft();
	oDiv.animate({top:(scrollTop+e.clientY-25)+"px",left:(scrollLeft+e.clientX-25)+"px"},18);
})

    </script>
</head>
<body id="body">
	<div class="a1">
		<div class="a2">首页	
		   <div class='a3'>
		   <div style="height:10px;width:100%;background-color:white;"></div>	
		   <div>糖画</div>
		   <div>糖画</div>
		   <div>糖画</div>
		   <div>糖画</div>
		   </div>
		</div>
		<div>起源历史</div>
		<div>糖画知识</div>
		<div>街市文化</div>
		<div>艺术展示</div>
	</div>
	<!--<div>
		<img src="img/timg.jpg" />
	</div>-->
    <div class="a5">
    	
    	<ul id="wrap" class="center"></ul>
    </div>
    <div class="a18">艺术展示</div>

<div id="div1" >
</div>
</body>
</html>


